import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

interface Props {
    data:any,
    onPress:Function,
    unReadIds:Array<number>
}

import {
    Press,
    Avatar,
    FastImage
} from './../../../components';

import {
    Actions
} from 'react-native-router-flux';

import * as Const from './../../../const';
import parseUrl from './../../../utils/parseUrl';

class ConnectItem extends PureComponent<Props> {

    static defaultProps = {
        data:{},
        unReadIds:[],
        onPress:() => null
    }

    get Data() {
        const {
            data
        } = this.props;
        return data;
    }

    get userId() {
        const {
            userId
        } = this.Data;
        return userId;
    }

    get avatarUrl() {
        const {
            avatorUrl
        } = this.Data;
        return parseUrl(avatorUrl);
    }

    get userName() {
        const {
            userName
        } = this.Data;
        return userName;
    }

    get age() {
        const {
            age
        } = this.Data;
        return age;
    }

    get genderLabel() {
        const {
            genderLabel
        } = this.Data
        const {
            label = ``
        } = genderLabel || {};
        return label;
    }

    get cityLabel() {
        const {
            location
        } = this.Data;
        const {
            cityName
        } = location;
        return cityName;
    }

    get descName() {
        return [
            this.age,
            this.genderLabel,
            this.cityLabel
        ].filter(v => !!v).join(`,`)
    }

    private ToProfile = () => {
        Actions.push(`/profile/:userId`,{
            params:{
                userId:this.userId
            }
        })
        this.props.onPress(this.userId);
    }

    get isNew() {
        const {
            unReadIds
        } = this.props;
        return unReadIds.findIndex((id:number) => (
            `${id}`===`${this.userId}`
        )) > -1;
    }

    render() {
        return (
            <Press
                style={styles.container}
                onPress={this.ToProfile}
            >
                <View style={styles.wrapper}>
                    <View>
                        <Avatar
                            size={64}
                            url={this.avatarUrl}
                        />
                        {this.isNew && (
                            <View style={styles.dotNum} />
                        )}
                    </View>
                    <View style={styles.content}>
                        <Text style={styles.userName}>
                            {this.userName}
                        </Text>
                        <Text style={styles.descName}>
                            {this.descName}
                        </Text>
                    </View>
                </View>
            </Press>
        )
    }
}

export default ConnectItem;

const styles = StyleSheet.create({
    container:{
        paddingVertical:14,
        borderColor:`#eff3f7`,
        borderBottomWidth:1,
        backgroundColor:`#fff`
    },
    wrapper:{
        flex:1,
        alignItems:`center`,
        flexDirection:`row`,
        paddingHorizontal:16
    },
    userName:{
        fontSize:18,
        color:`#333`,
        fontWeight:`bold`
    },
    descName:{
        fontSize:15,
        color:`#999999`,
        marginTop:8
    },
    content:{
        flex:1,
        paddingLeft:14
    },
    dotNum:{
        width:8,
        height:8,
        right:2,
        top:2,
        borderRadius:4,
        position:`absolute`,
        backgroundColor:Const.color
    }
}) as any